<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片打印测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .btn-secondary {
            background-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #545b62;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            display: none;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .printer-list {
            margin-top: 10px;
        }
        #printerList {
            max-height: 150px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            display: none;
        }
        #printerList div {
            padding: 5px;
            cursor: pointer;
        }
        #printerList div:hover {
            background-color: #f8f9fa;
        }
        .checkbox-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .api-doc-link {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: #007bff;
            text-decoration: none;
        }
        .api-doc-link:hover {
            text-decoration: underline;
        }
        .paper-size-group {
            display: flex;
            gap: 10px;
        }
        .paper-size-group input {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>图片打印测试</h1>
        <form id="printForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="image">选择图片:</label>
                <input type="file" id="image" name="image" accept="image/*" required>
            </div>
            
            <div class="form-group">
                <label for="printerName">打印机名称:</label>
                <input type="text" id="printerName" name="printerName" placeholder="请输入打印机名称" required>
                <button type="button" id="getPrinters" class="btn-secondary">获取打印机列表</button>
                <div id="printerList"></div>
                <div class="printer-list">
                    <small>提示：需要输入本地连接的打印机名称</small>
                </div>
            </div>
            
            <div class="form-group">
                <label for="copies">打印份数:</label>
                <input type="number" id="copies" name="copies" min="1" max="100" value="1">
            </div>
            
            <div class="form-group" id="customSizeOptions" style="display: none;">
                <label>自定义相纸尺寸 (英寸):</label>
                <div class="paper-size-group">
                    <input type="number" id="paperWidth" name="paperWidth" placeholder="宽度" step="0.01">
                    <input type="number" id="paperHeight" name="paperHeight" placeholder="高度" step="0.01">
                    <input type="number" id="dpi" name="dpi" placeholder="DPI" value="300" min="72" max="1200">
                </div>
                <small>自定义尺寸模式下必须填写宽度和高度</small>
            </div>
            
            <div class="form-group">
                <label for="printMode">打印模式:</label>
                <select id="printMode" name="printMode">
                    <option value="normal">普通打印</option>
                    <option value="6inch_vertical" selected>6寸竖向照片</option>
                    <option value="6inch_horizontal">6寸横向照片</option>
                    <option value="custom">自定义尺寸</option>
                </select>
            </div>
            
            <div class="form-group" id="normalOptions" style="display: none;">
                <label>普通打印选项:</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="fitToPage" name="fitToPage" checked> 
                        <label for="fitToPage">适应页面大小</label>
                    </div>
                </div>
            </div>
            
            <button type="submit">上传并打印</button>
        </form>
        
        <div id="result" class="result"></div>
        
        <a href="api-doc.html" class="api-doc-link" target="_blank">查看API接口文档</a>
    </div>

    <script>
        // 打印模式切换处理
        document.getElementById('printMode').addEventListener('change', function() {
            const printMode = this.value;
            const normalOptions = document.getElementById('normalOptions');
            const customSizeOptions = document.getElementById('customSizeOptions');
            
            // 隐藏所有选项
            normalOptions.style.display = 'none';
            customSizeOptions.style.display = 'none';
            
            // 根据选择的模式显示相应选项
            if (printMode === 'normal') {
                normalOptions.style.display = 'block';
            } else if (printMode === 'custom') {
                customSizeOptions.style.display = 'block';
            }
        });
        
        document.getElementById('getPrinters').addEventListener('click', function() {
            const printerList = document.getElementById('printerList');
            const printerNameInput = document.getElementById('printerName');
            
            fetch('/api/print/printers')
            .then(response => response.json())
            .then(data => {
                if (data.length > 0) {
                    printerList.innerHTML = '';
                    data.forEach(printer => {
                        const div = document.createElement('div');
                        div.textContent = printer;
                        div.addEventListener('click', function() {
                            printerNameInput.value = printer;
                            printerList.style.display = 'none';
                        });
                        printerList.appendChild(div);
                    });
                    printerList.style.display = 'block';
                } else {
                    printerList.innerHTML = '<div>未找到可用的打印机</div>';
                    printerList.style.display = 'block';
                }
            })
            .catch(error => {
                printerList.innerHTML = '<div>获取打印机列表失败: ' + error.message + '</div>';
                printerList.style.display = 'block';
            });
        });

        document.getElementById('printForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData();
            formData.append('image', document.getElementById('image').files[0]);
            formData.append('printerName', document.getElementById('printerName').value);
            formData.append('copies', document.getElementById('copies').value);
            formData.append('printMode', document.getElementById('printMode').value);
            
            // 根据打印模式添加相应参数
            const printMode = document.getElementById('printMode').value;
            
            if (printMode === 'normal') {
                formData.append('fitToPage', document.getElementById('fitToPage').checked);
            } else if (printMode === 'custom') {
                const paperWidth = document.getElementById('paperWidth').value;
                const paperHeight = document.getElementById('paperHeight').value;
                const dpi = document.getElementById('dpi').value;
                
                if (paperWidth && paperHeight) {
                    formData.append('paperWidth', paperWidth);
                    formData.append('paperHeight', paperHeight);
                    formData.append('dpi', dpi);
                } else {
                    alert('自定义尺寸模式下必须填写宽度和高度');
                    return;
                }
            }
            
            const resultDiv = document.getElementById('result');
            resultDiv.style.display = 'none';
            
            fetch('/api/print/image', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                resultDiv.innerHTML = data;
                if (data.includes('成功')) {
                    resultDiv.className = 'result success';
                } else {
                    resultDiv.className = 'result error';
                }
                resultDiv.style.display = 'block';
            })
            .catch(error => {
                resultDiv.innerHTML = '请求失败: ' + error.message;
                resultDiv.className = 'result error';
                resultDiv.style.display = 'block';
            });
        });

        // 点击其他地方隐藏打印机列表
        document.addEventListener('click', function(event) {
            const printerList = document.getElementById('printerList');
            const getPrintersBtn = document.getElementById('getPrinters');
            if (printerList.style.display === 'block' && 
                !printerList.contains(event.target) && 
                event.target !== getPrintersBtn) {
                printerList.style.display = 'none';
            }
        });
    </script>
</body>
</html>